<template>
    <el-row>
        <el-col :span="4">
            <el-button @click="showDialog">添加</el-button>
        </el-col>
        <el-col :span="4">
            <el-button @click="saveBatch">保存</el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <el-table :data="checkRequestList" border style="width: 100%">
                <el-table-column prop="medicalTechnology.techName" label="项目名称" width="180" />
                <el-table-column prop="medicalTechnology.techPrice" label="价格" width="100"/>
                <el-table-column label="检查描述" width="180">
                    <template #default="{row}">
                        <span v-if="row.id">{{row.checkInfo}}</span>
                        <el-input v-else v-model.lazy="row.checkInfo"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="检查部位" width="180">
                    <template #default="{row}" >
                        <span v-if="row.id">{{row.checkPosition}}</span>
                        <el-input v-else v-model.lazy="row.checkPosition"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="checkState" label="状态" width="100"/>
                <el-table-column label="操作" width="180">
                    <template #default="{row}" >
                        <el-button 
                            @click="handleDelete(row.id)" 
                            v-if="row.checkState=='已开立'"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>

    <!-- 搜索显示检查项目的对话框 -->
    <el-dialog v-model="dialogVisible" title="新增检查申请" width="500" draggable>
        <el-row>
            <el-col :span="8">
                <el-input v-model="techName" placeholder="检查名称"/>
            </el-col>
            <el-col :span="5">
                <el-button @click="getCheckList">搜索</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table   
                        :data="checkList" 
                        border height="250" 
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column type="selection"  width="55" />
                    <el-table-column prop="techName" label="项目名称" width="180" />
                    <el-table-column prop="techCode" label="项目编码" />
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-button @click="addCheckRequest">确定</el-button>
                <el-button>取消</el-button>
            </el-col>
        </el-row>
    </el-dialog>

</template>

<script setup>
import httpRequest from '@/common';
import { ElMessage } from 'element-plus';
import {ref,getCurrentInstance, onMounted,defineProps,computed, watch} from 'vue';
import store from '@/store';
const {proxy} = getCurrentInstance();

//获取父组件传递的registerId  挂号id
const props = defineProps({
    rid:{
        type: Number,
        required: true
    }
});

//搜索到的检查项目
const checkList = ref([])

//搜索检查项目的条件
const techName = ref('');

//搜索检查项目
const getCheckList = ()=>{
    httpRequest(
            proxy,
            'get',
            '/medicaltech/type/检查/'+techName.value,
            null,
            resultBean=>{
                checkList.value = resultBean.data;
            }
        )
}

//检查申请的列表
const checkRequestList = ref([])

//查询检查申请   有可能有  也有可能没有
const getCheckRequestList = ()=>{
    httpRequest(
            proxy,
            'get',
            '/checkrequest/reg/'+props.rid,
            null,
            resultBean=>{
                checkRequestList.value = resultBean.data;
            }
        )
}

const dialogVisible = ref(false)

//让对话框显示
const showDialog = ()=>{
    dialogVisible.value = true;
}


//选中项的id集合
let selectOptions = ref([]);
  
//表格中多选框选中或取消时会触发  也就是选中项变化
const handleSelectionChange = (newSelection)=>{
    console.log('选中项改变',newSelection);
    selectOptions.value = []; //清空
    newSelection.forEach((selOp)=>{
        console.log(selOp);
        selectOptions.value.push(selOp);
    });
}

const addRequestList = ref([])


//添加检查到检查申请表格中  还没有添加到数据库  只是在表格中显示
const addCheckRequest = ()=>{

    console.log('------selectOptions-----',selectOptions.value);

    // let requestList = [];
    //遍历选中项(检查项目MedicalTechnology)  
    selectOptions.value.forEach(selOp=>{
        //构建检查申请对象(CheckRequest 关联了MedicalTechnologyId)
        let checkRequestObj = {
            registerId: props.rid,
            medicalTechnologyId: selOp.id,
            medicalTechnology: selOp,
            checkState: '已开立'
        }
        //添加到页面表格显示的集合中  ----  显示出来   包含之前查询出来的 和 刚刚勾选中的
        checkRequestList.value.push(checkRequestObj);
        //添加到预备更新数据库的集合中   ----- 为了发起添加请求时发送
        addRequestList.value.push(checkRequestObj);
    })

    // checkRequestList.value = requestList;

    dialogVisible.value = false;

}

//检查请求的批量添加
const saveBatch = ()=>{
    httpRequest(
        proxy,
        'post',
        '/checkrequest/addbatch',
        addRequestList.value,
        resultBean=>{
            ElMessage.success('添加成功');
            getCheckRequestList();
        }
    )
}

const activeTab = computed(()=>{
    return store.state.mrActiveTab;
})

watch(activeTab,(newValue,oldValue)=>{
    console.log('--------标签页切换了-------------------',newValue);
    if(newValue=='checkRequest'){
        setTimeout(()=>{
            getCheckRequestList();
        },100);
    }
},{
    immediate: true 
})


</script>

<style>
</style>